<template>
  <div class="edition-snippet">
    <img loading="lazy" :src="cover_url" />
    <div class="links">
      <a :href="edition.key" target="_blank">OL</a>
      <a
        v-if="edition.ocaid"
        :href="`https://archive.org/details/${edition.ocaid}`"
        target="_blank"
      >IA</a>
      <a
        v-if="edition.oclc_numbers"
        :href="`https://www.worldcat.org/oclc/${edition.oclc_numbers[0]}?tab=details`"
        target="_blank"
      >WC<span v-if="edition.oclc_numbers.length > 1" title="This edition has multiple OCLCs">*</span></a>
      <a
        v-if="asins.length"
        :href="`https://www.amazon.com/dp/${asins[0]}`"
        target="_blank"
      >AZ<span v-if="asins.length > 1" title="This edition has multiple potential ASINs">*</span></a>
    </div>
    <div class="info">
      <b>{{ number_of_pages }} p | {{languages}} | {{ publish_year }}</b>
      {{ ' ' }}
      <span class="publishers" :title="`${publishers.join(', ')}`">{{publishers.join(', ')}}</span>
    </div>
    <hr />
    <div class="title" :title="full_title">{{full_title}}</div>
  </div>
</template>

<script>
import _ from 'lodash';
import ISBN from 'isbn3';

export default {
    props: {
        edition: Object
    },
    computed: {
        publish_year() {
            if (!this.edition.publish_date) return '';
            const m = this.edition.publish_date.match(/\d{4}/);
            return m ? m[0] : null;
        },

        publishers() {
            return this.edition.publishers || [];
        },

        number_of_pages() {
            if (this.edition.number_of_pages) {
                return this.edition.number_of_pages;
            } else if (this.edition.pagination) {
                const m = this.edition.pagination.match(/\d+ ?p/);
                if (m) return parseFloat(m[0]);
            }

            return '?';
        },

        full_title() {
            let title = this.edition.title;
            if (this.edition.subtitle) title += `: ${this.edition.subtitle}`;
            return title;
        },

        cover_url() {
            const id =
        this.edition.covers && this.edition.covers[0]
            ? this.edition.covers[0]
            : null;
            if (id) return `https://covers.openlibrary.org/b/id/${id}-M.jpg`;

            const ocaid = this.edition.ocaid;
            if (ocaid)
                return `https://archive.org/download/${ocaid}/page/cover_w180_h360.jpg`;

            return 'https://covers.openlibrary.org/b/id/-1-M.jpg';
        },

        languages() {
            if (!this.edition.languages) return '???';
            const langs = this.edition.languages.map(lang => lang.key.split('/')[2]);
            return langs.join(', ');
        },

        asins() {
            return _.uniq([
                ...((this.edition.identifiers && this.edition.identifiers.amazon) || []),
                this.edition.isbn_10 && ISBN.asIsbn10(this.edition.isbn_10),
                this.edition.isbn_13 && ISBN.asIsbn10(this.edition.isbn_13),
            ].filter(x => x));
        }
    }
};
</script>

<style lang="less">
.edition-snippet {
  border-radius: 4px;
  height: 64px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 4px;
  font-size: 0.95em;

  img {
    height: 100%;
    width: 60px;
    background: #eee;
    object-fit: cover;
    object-position: top center;
    float: left;
    margin-right: 7px;
    // Min Height added for lazy loading so that the lazy loaded images are not 1 pixel and start having many books start loading
    min-height: 80px;
    &:hover {
      object-fit: contain;
    }
  }

  .links {
    float: right;
    padding-right: 2px;
    padding-top: 4px;
    a {
      padding: 2px;
    }
  }

  .info {
    padding-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .publishers {
    opacity: 0.8;
  }

  hr {
    margin: 4px 0;
    color: white;
  }
}
</style>
